<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预制梁片智能运维管理平台</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
            --dark-color: #34495e;
            --light-color: #ecf0f1;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
        }
        
        .sidebar {
            background-color: var(--dark-color);
            color: white;
            height: 100vh;
            position: fixed;
            padding-top: 20px;
        }
        
        .sidebar .nav-link {
            color: rgba(255, 255, 255, 0.8);
            border-radius: 5px;
            margin-bottom: 5px;
            padding: 10px 15px;
        }
        
        .sidebar .nav-link:hover, .sidebar .nav-link.active {
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
        }
        
        .sidebar .nav-link i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }
        
        .main-content {
            margin-left: 250px;
            padding: 20px;
        }
        
        .dashboard-card {
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
            margin-bottom: 20px;
            border: none;
        }
        
        .dashboard-card:hover {
            transform: translateY(-5px);
        }
        
        .card-icon {
            font-size: 2rem;
            opacity: 0.7;
        }
        
        .status-badge {
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: bold;
        }
        
        .status-normal {
            background-color: #d4edda;
            color: #155724;
        }
        
        .status-warning {
            background-color: #fff3cd;
            color: #856404;
        }
        
        .status-danger {
            background-color: #f8d7da;
            color: #721c24;
        }
        
        .chart-container {
            height: 300px;
            margin-bottom: 20px;
        }
        
        .table-responsive {
            border-radius: 10px;
            overflow: hidden;
        }
        
        .table th {
            background-color: var(--light-color);
        }
        
        .alert-item {
            border-left: 4px solid;
            margin-bottom: 10px;
            padding: 10px;
            background-color: white;
            border-radius: 5px;
        }
        
        .alert-critical {
            border-left-color: var(--danger-color);
        }
        
        .alert-warning {
            border-left-color: var(--warning-color);
        }
        
        .alert-info {
            border-left-color: var(--primary-color);
        }
        
        .map-container {
            height: 400px;
            background-color: #eee;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }
        
        .robot-status {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .robot-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 10px;
        }
        
        .robot-active {
            background-color: var(--secondary-color);
        }
        
        .robot-inactive {
            background-color: var(--warning-color);
        }
        
        .robot-error {
            background-color: var(--danger-color);
        }
        
        .search-box {
            position: relative;
            margin-bottom: 20px;
        }
        
        .search-box input {
            padding-left: 40px;
            border-radius: 20px;
        }
        
        .search-box i {
            position: absolute;
            left: 15px;
            top: 10px;
            color: #aaa;
        }
        
        .page-header {
            margin-bottom: 30px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏导航 -->
            <div class="col-md-2 sidebar">
                <div class="text-center mb-4">
                    <h4>智能运维管理平台</h4>
                </div>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#dashboard">
                            <i class="fas fa-tachometer-alt"></i> 总览看板
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#inspection">
                            <i class="fas fa-robot"></i> 巡检管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#beam-management">
                            <i class="fas fa-cubes"></i> 梁片管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#defect-analysis">
                            <i class="fas fa-search"></i> 缺陷分析
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#risk-assessment">
                            <i class="fas fa-exclamation-triangle"></i> 风险评估
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#maintenance">
                            <i class="fas fa-tools"></i> 维修管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contract">
                            <i class="fas fa-file-contract"></i> 合同管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#reports">
                            <i class="fas fa-chart-bar"></i> 报表统计
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#settings">
                            <i class="fas fa-cog"></i> 系统设置
                        </a>
                    </li>
                </ul>
            </div>

            <!-- 主内容区 -->
            <div class="col-md-10 main-content">
                <!-- 总览看板 -->
                <div id="dashboard">
                    <div class="page-header">
                        <h2><i class="fas fa-tachometer-alt me-2"></i>总览看板</h2>
                        <p class="text-muted">实时监控预制梁片状态与系统运行情况</p>
                    </div>

                    <div class="row">
                        <!-- 概览卡片 -->
                        <div class="col-md-3">
                            <div class="card dashboard-card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="text-muted mb-2">总梁片数</h6>
                                            <h3>1,248</h3>
                                        </div>
                                        <div class="card-icon text-primary">
                                            <i class="fas fa-cubes"></i>
                                        </div>
                                    </div>
                                    <div class="mt-3">
                                        <span class="text-success"><i class="fas fa-arrow-up"></i> 3.2%</span>
                                        <span class="text-muted">较上月</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="card dashboard-card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="text-muted mb-2">异常梁片</h6>
                                            <h3>28</h3>
                                        </div>
                                        <div class="card-icon text-warning">
                                            <i class="fas fa-exclamation-circle"></i>
                                        </div>
                                    </div>
                                    <div class="mt-3">
                                        <span class="text-danger"><i class="fas fa-arrow-up"></i> 1.5%</span>
                                        <span class="text-muted">较上月</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="card dashboard-card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="text-muted mb-2">今日巡检</h6>
                                            <h3>56</h3>
                                        </div>
                                        <div class="card-icon text-info">
                                            <i class="fas fa-robot"></i>
                                        </div>
                                    </div>
                                    <div class="mt-3">
                                        <span class="text-success"><i class="fas fa-check-circle"></i> 完成率 92%</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="card dashboard-card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="text-muted mb-2">待处理预警</h6>
                                            <h3>7</h3>
                                        </div>
                                        <div class="card-icon text-danger">
                                            <i class="fas fa-bell"></i>
                                        </div>
                                    </div>
                                    <div class="mt-3">
                                        <span class="text-warning"><i class="fas fa-clock"></i> 3项超时</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <!-- 梁片状态分布 -->
                        <div class="col-md-6">
                            <div class="card dashboard-card">
                                <div class="card-body">
                                    <h5 class="card-title">梁片状态分布</h5>
                                    <div class="chart-container">
                                        <canvas id="beamStatusChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 缺陷类型统计 -->
                        <div class="col-md-6">
                            <div class="card dashboard-card">
                                <div class="card-body">
                                    <h5 class="card-title">缺陷类型统计</h5>
                                    <div class="chart-container">
                                        <canvas id="defectTypeChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <!-- 预警信息 -->
                        <div class="col-md-6">
                            <div class="card dashboard-card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <h5 class="card-title mb-0">最新预警</h5>
                                        <a href="#" class="btn btn-sm btn-outline-primary">查看全部</a>
                                    </div>
                                    
                                    <div class="alert-item alert-critical">
                                        <div class="d-flex justify-content-between">
                                            <strong>紧急: 梁片B-0234裂缝扩展</strong>
                                            <small class="text-muted">10分钟前</small>
                                        </div>
                                        <p class="mb-1">裂缝宽度超过安全阈值(>2.5mm)，建议立即停工检查</p>
                                        <div class="d-flex justify-content-between">
                                            <small>位置: 京沪高速K125+300</small>
                                            <a href="#" class="btn btn-sm btn-danger">处理</a>
                                        </div>
                                    </div>
                                    
                                    <div class="alert-item alert-warning">
                                        <div class="d-flex justify-content-between">
                                            <strong>严重: 梁片A-1567蜂窝麻面</strong>
                                            <small class="text-muted">1小时前</small>
                                        </div>
                                        <p class="mb-1">检测到多处蜂窝麻面，面积达15cm²</p>
                                        <div class="d-flex justify-content-between">
                                            <small>位置: 沪昆高速K89+450</small>
                                            <a href="#" class="btn btn-sm btn-warning">处理</a>
                                        </div>
                                    </div>
                                    
                                    <div class="alert-item alert-info">
                                        <div class="d-flex justify-content-between">
                                            <strong>一般: 梁片C-0789钢筋锈蚀</strong>
                                            <small class="text-muted">3小时前</small>
                                        </div>
                                        <p class="mb-1">检测到钢筋保护层不足，存在锈蚀风险</p>
                                        <div class="d-flex justify-content-between">
                                            <small>位置: 沈海高速K256+780</small>
                                            <a href="#" class="btn btn-sm btn-primary">处理</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 巡检机器人状态 -->
                        <div class="col-md-6">
                            <div class="card dashboard-card">
                                <div class="card-body">
                                    <h5 class="card-title">巡检机器人状态</h5>
                                    
                                    <div class="robot-status">
                                        <div class="robot-indicator robot-active"></div>
                                        <span>Robot-001 (京沪高速K125段)</span>
                                        <span class="ms-auto">电池: 78%</span>
                                    </div>
                                    
                                    <div class="robot-status">
                                        <div class="robot-indicator robot-active"></div>
                                        <span>Robot-002 (沪昆高速K89段)</span>
                                        <span class="ms-auto">电池: 65%</span>
                                    </div>
                                    
                                    <div class="robot-status">
                                        <div class="robot-indicator robot-inactive"></div>
                                        <span>Robot-003 (沈海高速K256段)</span>
                                        <span class="ms-auto">充电中</span>
                                    </div>
                                    
                                    <div class="robot-status">
                                        <div class="robot-indicator robot-error"></div>
                                        <span>Robot-004 (京港澳高速K56段)</span>
                                        <span class="ms-auto">需要维护</span>
                                    </div>
                                    
                                    <div class="mt-4">
                                        <h6>今日巡检进度</h6>
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
                                        </div>
                                    </div>
                                    
                                    <div class="mt-4">
                                        <div id="robotChart" style="height: 200px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 梁片管理 -->
                <div id="beam-management" class="py-4" style="display: none;">
                    <div class="page-header">
                        <h2><i class="fas fa-cubes me-2"></i>梁片管理</h2>
                        <p class="text-muted">预制梁片基础信息与状态管理</p>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-8">
                            <div class="search-box">
                                <i class="fas fa-search"></i>
                                <input type="text" class="form-control" placeholder="搜索梁片编号、位置或状态...">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <button class="btn btn-primary float-end"><i class="fas fa-plus me-2"></i>添加梁片</button>
                        </div>
                    </div>

                    <div class="card dashboard-card">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>梁片编号</th>
                                            <th>所属项目</th>
                                            <th>位置坐标</th>
                                            <th>生产批次</th>
                                            <th>安装日期</th>
                                            <th>缺陷数量</th>
                                            <th>风险等级</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>B-0234</td>
                                            <td>京沪高速扩建</td>
                                            <td>K125+300</td>
                                            <td>2023-05</td>
                                            <td>2023-08-15</td>
                                            <td>3</td>
                                            <td><span class="badge bg-danger">高风险</span></td>
                                            <td><span class="status-badge status-danger">异常</span></td>
                                            <td>
                                                <button class="btn btn-sm btn-outline-primary">详情</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>A-1567</td>
                                            <td>沪昆高速维修</td>
                                            <td>K89+450</td>
                                            <td>2022-11</td>
                                            <td>2023-03-22</td>
                                            <td>2</td>
                                            <td><span class="badge bg-warning">中风险</span></td>
                                            <td><span class="status-badge status-warning">亚健康</span></td>
                                            <td>
                                                <button class="btn btn-sm btn-outline-primary">详情</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>C-0789</td>
                                            <td>沈海高速新建</td>
                                            <td>K256+780</td>
                                            <td>2023-02</td>
                                            <td>2023-06-10</td>
                                            <td>1</td>
                                            <td><span class="badge bg-info">低风险</span></td>
                                            <td><span class="status-badge status-normal">正常</span></td>
                                            <td>
                                                <button class="btn btn-sm btn-outline-primary">详情</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>D-3421</td>
                                            <td>京港澳高速</td>
                                            <td>K56+120</td>
                                            <td>2023-01</td>
                                            <td>2023-05-18</td>
                                            <td>0</td>
                                            <td><span class="badge bg-success">无风险</span></td>
                                            <td><span class="status-badge status-normal">正常</span></td>
                                            <td>
                                                <button class="btn btn-sm btn-outline-primary">详情</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>E-5678</td>
                                            <td>杭甬高速改造</td>
                                            <td>K34+560</td>
                                            <td>2022-09</td>
                                            <td>2023-01-05</td>
                                            <td>1</td>
                                            <td><span class="badge bg-info">低风险</span></td>
                                            <td><span class="status-badge status-normal">正常</span></td>
                                            <td>
                                                <button class="btn btn-sm btn-outline-primary">详情</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <nav aria-label="Page navigation" class="mt-4">
                                <ul class="pagination justify-content-center">
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                                    </li>
                                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                    <li class="page-item">
                                        <a class="page-link" href="#">下一页</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>

                <!-- 缺陷分析 -->
                <div id="defect-analysis" class="py-4" style="display: none;">
                    <div class="page-header">
                        <h2><i class="fas fa-search me-2"></i>缺陷分析</h2>
                        <p class="text-muted">预制梁片缺陷检测与智能识别结果</p>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="card dashboard-card">
                                <div class="card-body">
                                    <h5 class="card-title">缺陷筛选</h5>
                                    <div class="mb-3">
                                        <label class="form-label">缺陷类型</label>
                                        <select class="form-select">
                                            <option selected>全部类型</option>
                                            <option>裂缝</option>
                                            <option>蜂窝麻面</option>
                                            <option>剥落</option>
                                            <option>钢筋锈蚀</option>
                                            <option>尺寸偏差</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">风险等级</label>
                                        <select class="form-select">
                                            <option selected>全部等级</option>
                                            <option>高风险</option>
                                            <option>中风险</option>
                                            <option>低风险</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">时间范围</label>
                                        <select class="form-select">
                                            <option selected>最近一周</option>
                                            <option>最近一个月</option>
                                            <option>最近三个月</option>
                                            <option>自定义范围</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">所属项目</label>
                                        <select class="form-select">
                                            <option selected>全部项目</option>
                                            <option>京沪高速扩建</option>
                                            <option>沪昆高速维修</option>
                                            <option>沈海高速新建</option>
                                            <option>京港澳高速</option>
                                            <option>杭甬高速改造</option>
                                        </select>
                                    </div>
                                    <button class="btn btn-primary w-100">应用筛选</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="card dashboard-card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <h5 class="card-title mb-0">缺陷列表</h5>
                                        <div>
                                            <button class="btn btn-sm btn-outline-secondary me-2"><i class="fas fa-download"></i> 导出</button>
                                            <button class="btn btn-sm btn-outline-primary"><i class="fas fa-chart-line"></i> 趋势分析</button>
                                        </div>
                                    </div>
                                    
                                    <div class="table-responsive">
                                        <table class="table table-hover">
                                            <thead>
                                                <tr>
                                                    <th>缺陷ID</th>
                                                    <th>梁片编号</th>
                                                    <th>缺陷类型</th>
                                                    <th>尺寸参数</th>
                                                    <th>位置</th>
                                                    <th>检测时间</th>
                                                    <th>风险等级</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>DF-2023-0456</td>
                                                    <td>B-0234</td>
                                                    <td>裂缝</td>
                                                    <td>长32cm, 宽2.8mm</td>
                                                    <td>腹板中部</td>
                                                    <td>2023-11-15 09:23</td>
                                                    <td><span class="badge bg-danger">高风险</span></td>
                                                    <td>
                                                        <button class="btn btn-sm btn-outline-primary">详情</button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>DF-2023-0455</td>
                                                    <td>A-1567</td>
                                                    <td>蜂窝麻面</td>
                                                    <td>面积15cm², 深3cm</td>
                                                    <td>底板左侧</td>
                                                    <td>2023-11-15 08:47</td>
                                                    <td><span class="badge bg-warning">中风险</span></td>
                                                    <td>
                                                        <button class="btn btn-sm btn-outline-primary">详情</button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>DF-2023-0454</td>
                                                    <td>C-0789</td>
                                                    <td>钢筋锈蚀</td>
                                                    <td>保护层不足2cm</td>
                                                    <td>顶板右侧</td>
                                                    <td>2023-11-14 16:12</td>
                                                    <td><span class="badge bg-info">低风险</span></td>
                                                    <td>
                                                        <button class="btn btn-sm btn-outline-primary">详情</button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>DF-2023-0453</td>
                                                    <td>B-0234</td>
                                                    <td>裂缝</td>
                                                    <td>长12cm, 宽1.2mm</td>
                                                    <td>端部</td>
                                                    <td>2023-11-14 15:38</td>
                                                    <td><span class="badge bg-warning">中风险</span></td>
                                                    <td>
                                                        <button class="btn btn-sm btn-outline-primary">详情</button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>DF-2023-0452</td>
                                                    <td>E-5678</td>
                                                    <td>尺寸偏差</td>
                                                    <td>高度+1.5cm</td>
                                                    <td>整体</td>
                                                    <td>2023-11-14 14:25</td>
                                                    <td><span class="badge bg-info">低风险</span></td>
                                                    <td>
                                                        <button class="btn btn-sm btn-outline-primary">详情</button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 风险评估 -->
                <div id="risk-assessment" class="py-4" style="display: none;">
                    <div class="page-header">
                        <h2><i class="fas fa-exclamation-triangle me-2"></i>风险评估</h2>
                        <p class="text-muted">预制梁片风险等级评估与预警管理</p>
                    </div>

                    <div class="row">
                        <div class="col-md-8">
                            <div class="card dashboard-card">
                                <div class="card-body">
                                    <h5 class="card-title">风险分布热力图</h5>
                                    <div class="map-container">
                                        <!-- 这里将放置地图热力图 -->
                                        <div class="d-flex justify-content-center align-items-center h-100">
                                            <div class="text-center">
                                                <i class="fas fa-map-marked-alt fa-3x text-muted mb-3"></i>
                                                <p class="text-muted">风险热力图可视化展示</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card dashboard-card">
                                <div class="card-body">
                                    <h5 class="card-title">风险等级统计</h5>
                                    <div class="chart-container">
                                        <canvas id="riskLevelChart"></canvas>
                                    </div>
                                    <div class="mt-3">
                                        <div class="d-flex justify-content-between mb-2">
                                            <span>高风险</span>
                                            <span>7 <small class="text-muted">(5.6%)</small></span>
                                        </div>
                                        <div class="progress mb-3" style="height: 8px;">
                                            <div class="progress-bar bg-danger" role="progressbar" style="width: 5.6%" aria-valuenow="5.6" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                        
                                        <div class="d-flex justify-content-between mb-2">
                                            <span>中风险</span>
                                            <span>21 <small class="text-muted">(16.8%)</small></span>
                                        </div>
                                        <div class="progress mb-3" style="height: 8px;">
                                            <div class="progress-bar bg-warning" role="progressbar" style="width: 16.8%" aria-valuenow="16.8" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                        
                                        <div class="d-flex justify-content-between mb-2">
                                            <span>低风险</span>
                                            <span>35 <small class="text-muted">(28%)</small></span>
                                        </div>
                                        <div class="progress mb-3" style="height: 8px;">
                                            <div class="progress-bar bg-info" role="progressbar" style="width: 28%" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card dashboard-card mt-4">
                                <div class="card-body">
                                    <h5 class="card-title">风险趋势</h5>
                                    <div class="chart-container">
                                        <canvas id="riskTrendChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="card dashboard-card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <h5 class="card-title mb-0">风险处置记录</h5>
                                        <button class="btn btn-sm btn-outline-primary">新增处置</button>
                                    </div>
                                    
                                    <div class="table-responsive">
                                        <table class="table table-hover">
                                            <thead>
                                                <tr>
                                                    <th>处置ID</th>
                                                    <th>梁片编号</th>
                                                    <th>风险类型</th>
                                                    <th>风险等级</th>
                                                    <th>处置措施</th>
                                                    <th>处置人员</th>
                                                    <th>处置时间</th>
                                                    <th>处置状态</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>RS-2023-012</td>
                                                    <td>B-0234</td>
                                                    <td>裂缝扩展</td>
                                                    <td><span class="badge bg-danger">高风险</span></td>
                                                    <td>环氧树脂灌缝</td>
                                                    <td>张工</td>
                                                    <td>2023-11-15 10:30</td>
                                                    <td><span class="badge bg-success">已完成</span></td>
                                                    <td>
                                                        <button class="btn btn-sm btn-outline-primary">详情</button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>RS-2023-011</td>
                                                    <td>A-1567</td>
                                                    <td>蜂窝麻面</td>
                                                    <td><span class="badge bg-warning">中风险</span></td>
                                                    <td>表面修补</td>
                                                    <td>李工</td>
                                                    <td>2023-11-14 15:20</td>
                                                    <td><span class="badge bg-success">已完成</span></td>
                                                    <td>
                                                        <button class="btn btn-sm btn-outline-primary">详情</button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>RS-2023-010</td>
                                                    <td>C-0789</td>
                                                    <td>钢筋锈蚀</td>
                                                    <td><span class="badge bg-info">低风险</span></td>
                                                    <td>防腐处理</td>
                                                    <td>王工</td>
                                                    <td>2023-11-13 09:45</td>
                                                    <td><span class="badge bg-warning">进行中</span></td>
                                                    <td>
                                                        <button class="btn btn-sm btn-outline-primary">详情</button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>RS-2023-009</td>
                                                    <td>D-3421</td>
                                                    <td>尺寸偏差</td>
                                                    <td><span class="badge bg-info">低风险</span></td>
                                                    <td>监测观察</td>
                                                    <td>赵工</td>
                                                    <td>2023-11-12 14:10</td>
                                                    <td><span class="badge bg-secondary">已关闭</span></td>
                                                    <td>
                                                        <button class="btn btn-sm btn-outline-primary">详情</button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>RS-2023-008</td>
                                                    <td>E-5678</td>
                                                    <td>裂缝</td>
                                                    <td><span class="badge bg-warning">中风险</span></td>
                                                    <td>表面封闭</td>
                                                    <td>张工</td>
                                                    <td>2023-11-10 11:25</td>
                                                    <td><span class="badge bg-success">已完成</span></td>
                                                    <td>
                                                        <button class="btn btn-sm btn-outline-primary">详情</button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 侧边栏导航切换
        document.querySelectorAll('.sidebar .nav-link').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 移除所有active类
                document.querySelectorAll('.sidebar .nav-link').forEach(el => {
                    el.classList.remove('active');
                });
                
                // 添加当前active类
                this.classList.add('active');
                
                // 隐藏所有内容区
                document.querySelectorAll('.main-content > div').forEach(div => {
                    div.style.display = 'none';
                });
                
                // 显示对应内容区
                const target = this.getAttribute('href').substring(1);
                document.getElementById(target).style.display = 'block';
            });
        });

        // 初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            // 梁片状态分布图
            const beamStatusCtx = document.getElementById('beamStatusChart').getContext('2d');
            const beamStatusChart = new Chart(beamStatusCtx, {
                type: 'doughnut',
                data: {
                    labels: ['正常', '亚健康', '异常'],
                    datasets: [{
                        data: [1020, 200, 28],
                        backgroundColor: [
                            '#2ecc71',
                            '#f39c12',
                            '#e74c3c'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                        }
                    }
                }
            });
            
            // 缺陷类型统计图
            const defectTypeCtx = document.getElementById('defectTypeChart').getContext('2d');
            const defectTypeChart = new Chart(defectTypeCtx, {
                type: 'bar',
                data: {
                    labels: ['裂缝', '蜂窝麻面', '剥落', '钢筋锈蚀', '尺寸偏差'],
                    datasets: [{
                        label: '缺陷数量',
                        data: [45, 32, 18, 22, 15],
                        backgroundColor: [
                            'rgba(231, 76, 60, 0.7)',
                            'rgba(241, 196, 15, 0.7)',
                            'rgba(52, 152, 219, 0.7)',
                            'rgba(46, 204, 113, 0.7)',
                            'rgba(155, 89, 182, 0.7)'
                        ],
                        borderColor: [
                            'rgba(231, 76, 60, 1)',
                            'rgba(241, 196, 15, 1)',
                            'rgba(52, 152, 219, 1)',
                            'rgba(46, 204, 113, 1)',
                            'rgba(155, 89, 182, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });
            
            // 风险等级图
            const riskLevelCtx = document.getElementById('riskLevelChart').getContext('2d');
            const riskLevelChart = new Chart(riskLevelCtx, {
                type: 'pie',
                data: {
                    labels: ['高风险', '中风险', '低风险', '无风险'],
                    datasets: [{
                        data: [7, 21, 35, 185],
                        backgroundColor: [
                            '#e74c3c',
                            '#f39c12',
                            '#3498db',
                            '#2ecc71'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                        }
                    }
                }
            });
            
            // 风险趋势图
            const riskTrendCtx = document.getElementById('riskTrendChart').getContext('2d');
            const riskTrendChart = new Chart(riskTrendCtx, {
                type: 'line',
                data: {
                    labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月'],
                    datasets: [
                        {
                            label: '高风险',
                            data: [5, 4, 6, 5, 7, 6, 8, 7, 6, 7, 7],
                            borderColor: '#e74c3c',
                            backgroundColor: 'rgba(231, 76, 60, 0.1)',
                            tension: 0.3,
                            fill: true
                        },
                        {
                            label: '中风险',
                            data: [12, 14, 16, 15, 18, 20, 22, 20, 19, 21, 21],
                            borderColor: '#f39c12',
                            backgroundColor: 'rgba(241, 196, 15, 0.1)',
                            tension: 0.3,
                            fill: true
                        },
                        {
                            label: '低风险',
                            data: [25, 28, 30, 32, 30, 33, 35, 34, 32, 34, 35],
                            borderColor: '#3498db',
                            backgroundColor: 'rgba(52, 152, 219, 0.1)',
                            tension: 0.3,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
            
            // 机器人状态图 (使用ECharts)
            const robotChart = echarts.init(document.getElementById('robotChart'));
            robotChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['运行中', '待命', '充电中', '维修中'],
                    bottom: 0
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['Robot-001', 'Robot-002', 'Robot-003', 'Robot-004', 'Robot-005']
                },
                yAxis: {
                    type: 'value',
                    max: 100,
                    axisLabel: {
                        formatter: '{value}%'
                    }
                },
                series: [
                    {
                        name: '运行中',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [78, 65, 0, 0, 45],
                        itemStyle: {
                            color: '#2ecc71'
                        }
                    },
                    {
                        name: '待命',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [0, 0, 0, 0, 55],
                        itemStyle: {
                            color: '#f39c12'
                        }
                    },
                    {
                        name: '充电中',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [22, 35, 100, 0, 0],
                        itemStyle: {
                            color: '#3498db'
                        }
                    },
                    {
                        name: '维修中',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [0, 0, 0, 100, 0],
                        itemStyle: {
                            color: '#e74c3c'
                        }
                    }
                ]
            });
        });
    </script>
</body>
</html>